<template>
  <view class="container" style="padding-bottom: 90px" v-if="isLoaded">
    <!--  tab 栏 -->
    <view class="wh100">
      <view class="tabs">
        <u-tabs :list="tabMenus" lineColor="#F3C45D" lineWidth="30" :activeStyle="activeStyle" @click="onTabClick"></u-tabs>
      </view>
      <view class="data-empty-wh100" v-if="tabMenus == null || tabMenus.length == 0">
        <u-empty :text="`${topMenuSubject}为空,请新建${topMenuSubject}后再添加~`" />
      </view>
      <view v-else class="items-container" style="padding-bottom: 90px">
        <block v-if="pageList.length > 0">
          <view @click="onItemClick(item)" class="items" :id="`menu-${item.id}`" v-for="(item, index) in pageList" :key="item.id" style="display: flex; align-items: center">
            <text class="item-title" style="flex: 1">{{ item[itemName] }}</text>
            <text style="margin: 8px; font-size: 24rpx">容纳人数：{{ item['manQty'] != null ? `${item['manQty']}人` : '无' }}</text>
            <view @click.stop="onQrCoreClick($event, item)">
              <u-icon size="20" name="/static/images/icon/qrcode.png"></u-icon>
            </view>
          </view>
          <!-- 加载更多 -->
          <u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" :loadmore="onReachBottomEvent" line />
        </block>
        <view v-else class="data-empty-wh100">
          <u-empty :text="`${subject}为空`" />
        </view>
      </view>
    </view>

    <!-- 二维码弹窗 -->
    <u-popup :show="showQrCode" @close="closeQrCodePopup" @open="openQrCodePopup">
      <view class="layout" style="height: 90vh; width: 100vw; overflow-y: scroll">
        <block v-if="QrCoreList.length > 0">
          <image
            v-for="item in QrCoreList"
            :key="item.imgpath"
            style="width: 100vw; margin-bottom: 10px"
            mode="widthFix"
            :src="item.imgpath"
            show-menu-by-longpress
            @click="uPreviewImage(item.imgpath)"
          ></image>
        </block>

        <u-empty style="margin-top: 20px" v-else />
      </view>
    </u-popup>

    <!--  两层结构时使用  -->
    <view class="bottom-add" @click="btnAddClick" v-if="tabMenus.length > 0">新建{{ subject }}</view>
    <!--  三层结构时使用  -->
    <!--     <view
      class="bottom-add"
      @click="btnAddClick"
      v-if="tabMenus.length > 0 && leftMenus.length > 0"
    >
      新建{{ subject }}
    </view> -->
    <!--  单层结构时使用  -->
    <!-- <view class="bottom-add" @click="btnAddClick" > 新建{{ subject }} </view> -->
  </view>
</template>

<script>
import { uShowLoading, uHideLoading, uNavigateTo, uPreviewImage, uSwitchTab } from '../../../utils/uniUtils.js';
import { GetFoodDeskList, GetFoodDeskCategoryList, GetFoodDeskQrCode } from '../../../common/api';
export default {
  data() {
    return {
      activeStyle: {
        color: '#F3C45D'
      },
      loadStatus: 'loadmore',
      loadingText: '努力加载中。。。',
      loadmoreText: '上拉加载更多~~',
      nomoreText: '已全部加载~~',

      tabMenus: [],
      leftMenus: [],
      pageList: [],

      topMenuSubject: '桌台区域',
      leftMenuSubject: '',
      subject: '桌台',
      topTabsIdx: 0,
      leftTabsIdx: 0,
      itemName: 'name',
      rootRoute: 'workbench',
      routeName: 'tableRms',
      isLoaded: false,

      pageNum: 1,
      pageSize: 10,
      total: 0,
      showLoadMore: false,

      QrCoreList: [],
      showQrCode: false
    };
  },

  onReachBottom() {
    this.onReachBottomEvent();
  },

  async mounted() {
    try {
      uShowLoading();
      const tabMenus = await this.GetTabMenus();
      if (tabMenus.length == 0) {
        return;
      }
      await this.GetPageList(this.topTabsIdx);
      this.getOtherData();
    } catch (error) {
      utoast('页面初始化失败！', 'error');
      setTimeout(() => {
        uSwitchTab('/pages/tabBar/staging');
      }, 800);
    } finally {
      uHideLoading();
      this.isLoaded = true;
    }
  },
  methods: {
    uPreviewImage,

    onReachBottomEvent() {
      console.log('onReachBottom');
      if (this.pageList.length < this.total) {
        this.showLoadMore = true;
        setTimeout(async () => {
          uShowLoading();
          if (this.showLoadMore) {
            this.pageNum += 1;
          }
          this.loadStatus = 'loading';
          await this.GetPageList();
          uHideLoading();
        }, 300);
      } else {
        // utoast("没有更多数据了!", toastIconEnum.error);
        return;
      }
    },

    async onTabClick(e) {
      if (this.topTabsIdx == e.index) {
        return;
      }
      this.topTabsIdx = e.index;
      this.pageNum = 1;
      this.pageList = [];
      await this.GetPageList(e.index);
    },

    async onLeftTabClick(e) {},
    async GetTabMenus() {
      this.tabMenus = (await GetFoodDeskCategoryList()).data.list;
      if (this.tabMenus.length == 0) {
        this.topTabsIdx = -1;
      } else {
        this.topTabsIdx = 0;
      }
      return this.tabMenus;
    },
    async GetLeftMenus() {},

    async GetPageList(idx = 0) {
      // console.log("GetFoodFeed");
      // console.log("this.tabMenus[idx] ", this.tabMenus[idx]);

      //  有  tabMenu时放开
      if (this.tabMenus[idx] != null) {
        let {
          data: { list, total }
        } = await GetFoodDeskList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          typeId: this.tabMenus[this.topTabsIdx].id
        });

        this.pageList = [...this.pageList, ...list];
        this.total = total;
        if (this.pageList.length == this.total) {
          this.loadStatus = 'nomore';
        } else {
          this.loadStatus = 'loadmore';
        }
        this.showLoadMore = false; // console.log("tagList", list);
      }
    },
    getOtherData() {
      // ...
    },

    async btnAddClick() {
      uNavigateTo(`/pages/${this.rootRoute}/${this.routeName}/doEdit?mode=add `);
    },

    onItemClick(item) {
      uNavigateTo(`/pages/${this.rootRoute}/${this.routeName}/doEdit?mode=edit&id=` + item.id);
    },

    async onQrCoreClick(e, item) {
      e.stopPropagation();
      const res = await GetFoodDeskQrCode({
        typeId: this.tabMenus[this.topTabsIdx].id,
        id: item.id
      });
      this.QrCoreList = res.data.data;
      this.openQrCodePopup();
    },

    closeQrCodePopup() {
      this.showQrCode = !true;
    },

    openQrCodePopup() {
      this.showQrCode = true;
    }

    // 方法放上面
  }
};
</script>

<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';
.container {
  height: 100.1vh;
  .tabs {
    background-color: #fff;
  }
  .details {
    background-color: #fff;
  }
}
</style>
